{{ define "text" }}
<p class="f6 lh-copy mw5 mt2 mb0 mid-gray" style="word-break: break-all">
  {{- markdownify . -}}
</p>
{{ end }}

{{ define "hash" }}
<a href="https://ipfs.io{{ . }}" target="_blank" alt="Website" title="Website" class="aqua hover-teal">
  <abbr title="{{ . }}">
    {{ $length := sub (len .) 5 }}
    <code>{{ substr . 0 10 }}...{{ substr . $length 5 }}</code>
  </abbr>
</a>
{{ end }}

<div class="mv2 dn" id="search">
  <input
    placeholder="Find your awesome app..."
    class="input-reset outline-0 bn pa3 mb2 db w-100 center focus-outline dn"
    type="text" />
</div>

<main class="CardContainer mv4" >
  {{ range (sort .Params.content "index") -}}
  <article data-ref="{{ .index }}" class="Card dib bg-white shadow-4 br1 dark-gray b--black-10 ma2">
    <div class="bg-navy ttu fw6 tracked montserrat bg-{{ .color }}-muted br1 br--top white pv1 ph2 ph3-ns f7 b w-100">
      {{ humanize .category }}
    </div>

    <div class="pa2 ph3-ns pb3-ns flex flex-column flex-grow-1">
      <div class="dt w-100 mt1">
        <div class="dtc">
          <a target="_blank" class="no-underline charcoal" href="{{ if .website }}{{ .website }}{{ else if .source }}{{ .source }}{{ else if .demo }}{{ .demo }}{{ end }}">
            <h1 class="f5 mw5 f4-ns mv0">{{- .title -}}</h1>
          </a>
        </div>
      </div>

      {{- if isset . "date" -}}
        {{ template  "text" dateFormat "January 2, 2006" .date }}
      {{- end -}}

      {{- if isset . "description" -}}
        {{ template  "text" .description }}
      {{- end -}}

      {{- if isset . "size" -}}
        {{ template  "text" (print "Size: " .size) }}
      {{- end -}}

      {{- if isset . "hash" -}}
        <div class="mt2 mw5">
          {{ template  "hash" .hash }}
        </div>
      {{- end -}}

      {{- if isset . "picture" -}}
      <div class="mt2 mw5">
        <a target="_blank" class="no-underline charcoal" href="{{ if .website }}{{ .website }}{{ else if .source }}{{ .source }}{{ else if .demo }}{{ .demo }}{{ end }}">
          <img class="br2" src="{{ .picture | relURL }}" >
        </a>
      </div>
      {{ end }}

      <div class="flex pt2 mt-auto align-center justify-begin">
        {{- if isset . "website" -}}
        <a href="{{ .website }}" target="_blank" alt="Website" title="Website">
          {{ partial "icons/globe.svg" }}
        </a>
        {{- end -}}

        {{- if isset . "snapshot" -}}
        <a href="http://ipfs.io/{{ .snapshot.hash }}" target="_blank" alt="Snapshot as of {{ .snapshot.date }}" title="Snapshot as of {{ .snapshot.date }}">
          {{ partial "icons/history.svg" }}
        </a>
        {{- end -}}

        {{- if isset . "source" -}}
        <a href="{{ .source }}" target="_blank" alt="Source Code" title="Source Code">
          {{ partial "icons/code.svg" }}
        </a>
        {{- end -}}

        {{- if isset .  "demo" -}}
        <a href="{{ .demo }}" target="_blank" alt="Demo" title="Demo">
          {{ partial "icons/flask.svg" }}
        </a>
        {{- end -}}
      </div>
    </div>
  </article>
  {{ end }}
</main>

{{ .Content }}